[Vue2]使用vue-avatar-editor套件裁減照片做出大頭貼(Resize image)

發表於 更新於 分類於

如果對於canvas熟悉的人不一定要使用這個套件，畢竟我是因為這個套件才認識了幾本的canvas用法，畢竟他的文檔沒有更多後續的資訊，vue-avatar-editor的Github。

使用前須知：

  1. 不用npm install這個套件只需自行創造這兩個.vue檔案import到使用的地方就好。
  2. 這個團隊似乎沒在維護這個Github了，有個簡單的錯誤tag <canvas> has no matching end tag.也沒修，自行到VueAvatar.vue這個檔案的template裡面幫他加上去</canvas>即可。

如何簡單使用vue-avatar-editor：

他的屬性真的不多，文件上就可以輕鬆掌握，裁減之後會觸發他預設的saveClicked()，他會給我們一個變數名稱是一個canvas的tag，然後呢？然後他的文件就到此為止了XD。

但其實這就是出圖的東西囉！！我們需要把這張圖片變成程式碼格式，其中一種格式只要下var pictureURL = img.toDataURL("image/png");再把他console.log出來會發現是一堆人看不懂的字串，但是電腦是看得懂的！

接著只要創造一個img的tag去裝他就行了！只要下這行$('.picture').attr('src', imgURL);就可以看到才剪出來的圖片了！

直接看範例吧：
p.s:我有用到jQuery喲！
先看html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
  <vue-avatar
    :width=400
    :height=400
    ref="vueavatar"
    @vue-avatar-editor:image-ready="onImageReady"
    image="https://vuejs.org/images/logo.png"
  >
  </vue-avatar>
  <br>
  <vue-avatar-scale
    ref="vueavatarscale"
    @vue-avatar-editor-scale:change-scale="onChangeScale"
    :width=250
    :min=1
    :max=3
    :step=0.02
  >
  </vue-avatar-scale>
  <br>
  <img src="" id="img-1">
  <button v-on:click="saveClicked">Click</button>
  <img src="#" class="picture">
</div>

看看JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import Vue from 'vue'
import VueAvatar from './components/VueAvatar.vue'
import VueAvatarScale from './components/VueAvatarScale.vue'

let vm = new Vue({
  el: '#app',
  components: {
    VueAvatar,
    VueAvatarScale
  },
  methods:{
    onChangeScale (scale) {
      this.$refs.vueavatar.changeScale(scale)
    },
    saveClicked(){
      var img = this.$refs.vueavatar.getImageScaled()
      // use img
      var pictureURL = img.toDataURL("image/png");
      $('.picture').attr('src', imgURL);
    },
    onImageReady(scale){
      this.$refs.vueavatarscale.setScale(scale)
    }
  }
})

沒意外的話就可以把img做出來了

Canvas與Image可以互相轉換：

這個網站有最簡單的function：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//用<img>製作一個新的<canvas>
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}
//用<canvas>製作一個新的<img>
// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

單純的互相轉換其實沒有這麼複雜，網路上有一堆文章幾乎都寫得大同小異，最常看到應該是使用filereader，filereader可以處理更多種類的檔案還有狀態，但我這裡不需要這麼複雜的操作。

只是因為需要做裁減的動作的話必須熟悉Canvas，但既然我們都沒有這麼多時間的話vue-avatar-editor確實幫我們做好了，所以vue-avatar-editor搭配這個網站的簡述就可以簡易做出大頭貼囉！

參考文章

vue-avatar-editor
Convert an Image to Canvas with JavaScript